<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>规格管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

	<script>

		function addTrs() {
			var atr='<tr><td><input name="optionName"  class="form-control" placeholder="规格选项"></td><td><input name="orders"  class="form-control" placeholder="排序"></td><td><button type="button" class="btn btn-default" title="删除" onclick="deleteTr(this)" ><i class="fa fa-trash-o"></i> 删除</button></td></tr>';
			$("#Lifting").append(atr);
		}
		function deleteTr(obj) {
			$(obj).parent().parent().remove();
		}


		function addTr() {
			$.ajax({
				url:"/tbSpecificationController/sorting",
				type:"get",
				datatype:"json",
				data:{},
				async:true,
				success:function(result){
					var p=result.length+1;
					var atr='<tr><td><input name="optionName"  class="form-control" placeholder="规格选项"></td><td><input name="orders" value="'+p+'"  class="form-control" placeholder="排序"></td><td><button type="button" class="btn btn-default" title="删除" onclick="deleteTr(this)" ><i class="fa fa-trash-o"></i> 删除</button></td></tr>';
					$("#aa").append(atr);
				},
				error:function(result){
					alert("系统异常，请联系管理员！！！");
				}
			})
		}

		function insertTbSpecification(){
			var result = [];
			$("#Lifting").find("tr").each(function(){
				var tdArr = $(this).children();
				var optionName = tdArr.eq(0).find("input").val();
				var orders = tdArr.eq(1).find("input").val();
				var obj = '{"optionName":"'+optionName+'","orders":'+orders+'}';
				result.push(obj);
			})
			if(result.length <= 0){
				alert("请添加规格选项");
				return;
			}

			$.ajax({
				url:"/tbSpecificationController/addTbSpecification",
				type:"get",
				datatype:"json",
				data:{specName:$("[name=specName]").val(),result:result},
				async:true,
				success:function(result){
					alert(result.member+","+result.content);
				},
				error:function(result){
					alert("系统异常，请联系管理员！！！");
				}
			})
		}

		function updateTbSpecification(){
			var result = [];
			$("#aa").find("tr").each(function(){
				var tdArr = $(this).children();
				var optionName = tdArr.eq(0).find("input").val();
				var orders = tdArr.eq(1).find("input").val();
				var obj = '{"optionName":"'+optionName+'","orders":'+orders+'}';
				result.push(obj);
			})
			if(result.length <= 0){
				alert("请添加规格选项");
				return;
			}
			$.ajax({
				url:"/tbSpecificationController/updateTbSpecification",
				type:"get",
				datatype:"json",
				data:{specName:$("#specName").val(),result:result},
				async:true,
				success:function(result){
					alert(result.member+","+result.content);
				},
				error:function(result){
					alert("系统异常，请联系管理员！！！");
				}
			})
		}


		function toUpdate(id) {
			var yin="";
			$.ajax({
				url:"/tbSpecificationController/toUpdate",
				type:"get",
				datatype:"json",
				data:{id:id},
				async:true,
				success:function(result){
					for (var i=0;i<result.length;i++){
						yin+='<tr><td><input id="optionName" value="'+result[i].optionName+'" class="form-control" placeholder="规格选项"></td><td><input id="orders"  value="'+result[i].orders+'" class="form-control" placeholder="排序"></td><td><button type="button" class="btn btn-default" title="删除" onclick="deleteTr(this)" ><i class="fa fa-trash-o"></i> 删除</button></td></tr>';
					}
					$("#connection").html(yin)
					tableMin();
				},
				error:function(result){
					alert("系统异常，请联系管理员！！！");
				}
			})
		}

		function tableMin() {
			$.ajax({
				url:"/tbSpecificationController/tableMin",
				type:"get",
				datatype:"json",
				data:{},
				async:true,
				success:function(result){
					$("#specName").val(result.specName);
				},
				error:function(result){
					alert("系统异常，请联系管理员！！！");
				}

			})
		}

		function deleteTbSpecification(){
			var boxs = document.getElementsByName("box");
			var ids="";
			for (var i = 0; i < boxs.length; i++) {
				if(boxs[i].checked){
					ids+=",'"+boxs[i].value+"'";
				}
			}
			ids=ids.substring(1);
			$.ajax({
				url:"/tbSpecificationController/deleteTbSpecification",
				type:"get",
				datatype:"json",
				data:{ids:ids},
				async:true,
				success:function(result){
					alert(result.member+","+result.content+","+JSON.stringify(result.data));
				},
				error:function(result){
					alert("系统异常，请联系管理员！！！");
				}
			})
		}
	</script>

</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->                
                    <div class="box-header with-border">
                        <h3 class="box-title">规格管理</h3>
                    </div>
                    <div class="box-body">
                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除" onclick="deleteTbSpecification()"><i class="fa fa-trash-o"></i> 删除</button>
                                        
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
							                    规格名称：<input  >									
									<button class="btn btn-default" >查询</button>                                    
                                </div>
                            </div>
                            <!--工具栏/-->
			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">规格ID</th>
									      <th class="sorting">规格名称</th>									     												
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
			                      <tbody>
								  <th:block th:each="tb:${tb}">
									  <tr>
										  <td><input th:value="${tb.id}" name="box" type="checkbox" ></td>
										  <td th:text="${tb.id}"></td>
										  <td th:text="${tb.specName}"></td>
										  <td class="text-center">
											  <button type="button" th:value="${tb.id}" class="btn bg-olive btn-xs" data-toggle="modal" onclick="toUpdate(this.value)" data-target="#updateModal">修改</button>
										  </td>
									  </tr>
								  </th:block>
			                      </tbody>
			                  </table>
			                  <!--数据列表/-->    
                        </div>
                        <!-- 数据表格 /--> 
                     </div>
                    <!-- /.box-body -->                    
	          		    
                                
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">规格编辑</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>规格名称</td>
		      		<td><input  class="form-control" placeholder="规格名称" name="specName" >  </td>
		      	</tr>
			 </table>				
			 
			 <!-- 规格选项 -->
			 <div class="btn-group">
                  <button type="button" class="btn btn-default" title="新建"  onclick="addTrs()"><i class="fa fa-file-o"></i> 新增规格选项</button>
             </div>
			 
			 <table class="table table-bordered table-striped table-hover dataTable" id="Lifting">
                    <thead>
                        <tr>
				      <th class="sorting">规格选项</th>
				      <th class="sorting">排序</th>																
                      <th class="sorting">操作</th>	
                    </thead>
                    <tbody>
                    </tbody>
			  </table>
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="insertTbSpecification()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>


  <!-- 编辑窗口 -->
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
	  <div class="modal-dialog" >
		  <div class="modal-content">
			  <div class="modal-header">
				  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				  <h3 id="myModalLabel1">规格修改</h3>
			  </div>
			  <div class="modal-body">

				  <table class="table table-bordered table-striped"  width="800px">
					  <tr>
						  <td>规格名称</td>
						  <td><input  class="form-control" id="specName" placeholder="规格名称" >  </td>
					  </tr>
				  </table>

				  <!-- 规格选项 -->
				  <div class="btn-group">
					  <button type="button" class="btn btn-default" title="新建" onclick="addTr()" ><i class="fa fa-file-o"></i> 新增规格选项</button>

				  </div>

				  <table class="table table-bordered table-striped table-hover dataTable" id="aa">
					  <thead>
					  <tr>
						  <th class="sorting">规格选项</th>
						  <th class="sorting">排序</th>
						  <th class="sorting">操作</th>
					  </tr>
					  </thead>
					  <tbody  id="connection">

					  </tbody>
				  </table>
			  </div>
			  <div class="modal-footer">
				  <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateTbSpecification()">保存</button>
				  <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			  </div>
		  </div>
	  </div>
  </div>

</body>

</html>